fx-form-widget/es/packages/lineType/index.js

动态表单组件库

import * as React from 'react';
import { useState, useEffect } from 'react';
import { isNotNullValue } from './tools';
import classnames from 'classnames';
import './index.less';
var optionsList = ['none', 'dotted', 'solid', 'crudeSolid'];
var LineType = function LineType(_ref) {
  var _ref$schema = _ref.schema,
    schema = _ref$schema === void 0 ? {} : _ref$schema,
    _ref$onChange = _ref.onChange,
    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? isNotNullValue(schema.data) ? schema.data : '' : _ref$value;
  var _schema$readonly = schema.readonly,
    readonly = _schema$readonly === void 0 ? false : _schema$readonly,
    values = schema.values,
    defaultValue = schema.defaultValue;
  var _useState = useState('solid'),
    selectItem = _useState[0],
    setSelectItem = _useState[1];
  useEffect(function () {
    if (value) {
      setSelectItem(value);
    }
  }, [value]);
  useEffect(function () {
    if (defaultValue) {
      setSelectItem(defaultValue);
    }
  }, [defaultValue]);
  var renderOptions = function renderOptions() {
    return optionsList.map(function (value, key) {
      return /*#__PURE__*/React.createElement("div", {
        className: classnames('lineType_option', {
          selected: selectItem === value
        }),
        key: key,
        onClick: function onClick() {
          setSelectItem(value);
          onChange(value);
        }
      }, value === 'none' && '无边线', value === 'dotted' && /*#__PURE__*/React.createElement("span", {
        className: "lineType_option_dotted"
      }), value === 'solid' && /*#__PURE__*/React.createElement("span", {
        className: "lineType_option_solid"
      }), value === 'crudeSolid' && /*#__PURE__*/React.createElement("span", {
        className: "lineType_option_crudeSolid"
      }));
    });
  };
  var renderValus = function renderValus() {
    return values.map(function (value, key) {
      var id = value.id,
        text = value.text;
      return /*#__PURE__*/React.createElement("div", {
        className: classnames('lineType_option', {
          selected: selectItem === id
        }),
        key: key,
        onClick: function onClick() {
          setSelectItem(id);
          onChange(id);
        }
      }, text);
    });
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "lineType_wrap"
  }, readonly && /*#__PURE__*/React.createElement("div", {
    className: "shade_cover"
  }), values ? renderValus() : renderOptions());
};
export default LineType;