@fruits-chain/react-native-xiaoshu/lib/module/field/field-checkbox.js

🌈 React Native UI library

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import omit from 'lodash/omit';
import React, { memo } from 'react';
import Cell from '../cell';
import Checkbox from '../checkbox';
import { useControllableValue } from '../hooks';
import Space from '../space';
import Theme from '../theme';
import { varCreator } from './style';

const FieldCheckbox = _ref => {
  let {
    multiple = false,
    options,
    editable = true,
    ...restProps
  } = _ref;
  const TOKENS = Theme.useThemeTokens();
  const CV = Theme.createVar(TOKENS, varCreator);
  const [value, onChange] = useControllableValue(restProps, {
    defaultValue: multiple ? [] : undefined
  });
  return /*#__PURE__*/React.createElement(Cell, _extends({}, omit(restProps, ['value', 'defaultValue', 'onChange']), {
    center: !restProps.vertical,
    value: /*#__PURE__*/React.createElement(Space, {
      direction: "horizontal",
      gapVertical: restProps.vertical ? undefined : 0,
      gapHorizontal: CV.field_checkbox_gap,
      justify: restProps.vertical ? 'flex-start' : 'flex-end',
      wrap: restProps.vertical
    }, options.map(item => {
      const selected = multiple ? value.indexOf(item.value) > -1 : value === item.value;
      return /*#__PURE__*/React.createElement(Checkbox, {
        key: item.value,
        activeValue: item.value,
        inactiveValue: null,
        value: selected ? item.value : null,
        label: item.label,
        disabled: !editable,
        onChange: _value => {
          const isReset = _value !== item.value;

          if (multiple) {
            const oldValue = value;
            const newValue = isReset ? oldValue.filter(v => v !== item.value) : [item.value, ...oldValue];
            const newLabel = newValue.map(v => {
              const optionIndex = options.findIndex(o => o.value === v);
              return { ...options[optionIndex]
              };
            });
            onChange(newValue, newLabel);
          } else {
            const newValue = isReset ? undefined : _value;
            const newLabel = isReset ? undefined : { ...options.filter(o => o.value === _value)[0]
            };
            onChange(newValue, newLabel);
          }
        }
      });
    }))
  }));
};

export default /*#__PURE__*/memo(FieldCheckbox);
//# sourceMappingURL=field-checkbox.js.map