@fruits-chain/react-native-xiaoshu/lib/module/field/field-date-range.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 isUndefined from 'lodash/isUndefined';
import omit from 'lodash/omit';
import React, { useMemo, memo } from 'react';
import { Keyboard } from 'react-native';
import Cell from '../cell';
import { varCreator as varCreatorCell } from '../cell/style';
import DatePicker from '../date-picker';
import { formatDate } from '../date-picker-view/helper';
import { getDefaultValue, renderTextLikeJSX } from '../helpers';
import { useControllableValue, usePersistFn } from '../hooks';
import IconSwapRightOutline from '../icon/swap-right';
import { varCreator as varCreatorTextInput } from '../text-input/style';
import TextInputClear from '../text-input/text-input-clear';
import Theme from '../theme';

const FieldDateRange = _ref => {
  let {
    mode = 'Y-D',
    min,
    max,
    renderLabel,
    confirmButtonText,
    resetButtonText,
    formatValueText,
    datePickerTitle,
    dataPickerBeforeClose,
    isLink = true,
    editable = true,
    clearable = false,
    placeholder,
    placeholderTextColor,
    valueStyle,
    valueTextStyle,
    textAlign = 'right',
    ...restProps
  } = _ref;

  if (restProps.vertical) {
    textAlign = 'left';
  }

  const TOKENS = Theme.useThemeTokens();
  const CV_CELL = Theme.createVar(TOKENS, varCreatorCell);
  const CV_TEXT_INPUT = Theme.createVar(TOKENS, varCreatorTextInput); // 修正数据

  placeholderTextColor = getDefaultValue(placeholderTextColor, CV_TEXT_INPUT.text_input_placeholder_text_color);
  const [value, onChange] = useControllableValue(restProps);
  const valueTexts = useMemo(() => value !== null && value !== void 0 && value[0] && value[1] ? [formatDate(mode, value[0]), formatDate(mode, value[1])] : undefined, [value, mode]);
  const hasValue = !isUndefined(valueTexts);
  const valueTextStyles = useMemo(() => {
    return [{
      color: CV_CELL.cell_value_text_color,
      fontSize: CV_CELL.cell_font_size,
      lineHeight: CV_CELL.cell_title_line_height
    }, valueTextStyle, !hasValue ? {
      color: placeholderTextColor
    } : null];
  }, [CV_CELL.cell_font_size, CV_CELL.cell_title_line_height, CV_CELL.cell_value_text_color, valueTextStyle, hasValue, placeholderTextColor]);
  const onPress = usePersistFn(() => {
    Keyboard.dismiss();
    DatePicker.range({
      defaultValue: value,
      mode,
      min,
      max,
      renderLabel,
      confirmButtonText,
      resetButtonText,
      title: datePickerTitle,
      beforeClose: dataPickerBeforeClose
    }).then(_ref2 => {
      let {
        action,
        values: _values
      } = _ref2;

      if (action === 'confirm') {
        onChange(_values);
      }
    });
  });
  const swapRightJSX = /*#__PURE__*/React.createElement(IconSwapRightOutline, {
    size: 16,
    color: CV_CELL.cell_icon_color // eslint-disable-next-line react-native/no-inline-styles
    ,
    style: {
      alignItems: 'center',
      justifyContent: 'center',
      marginHorizontal: TOKENS.space_1 / 2
    }
  });
  const showTexts = hasValue && formatValueText ? formatValueText(value, mode, valueTexts) : valueTexts;
  return /*#__PURE__*/React.createElement(Cell, _extends({}, omit(restProps, ['value', 'defaultValue', 'onChange']), {
    disabled: !editable,
    onPress: onPress,
    valueStyle: [// eslint-disable-next-line react-native/no-inline-styles
    {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: textAlign === 'left' ? 'flex-start' : textAlign === 'center' ? 'center' : 'flex-end'
    }, valueStyle],
    value: hasValue ? /*#__PURE__*/React.createElement(React.Fragment, null, renderTextLikeJSX(showTexts[0], valueTextStyles), swapRightJSX, renderTextLikeJSX(showTexts[1], valueTextStyles)) : /*#__PURE__*/React.createElement(React.Fragment, null, placeholder !== null && placeholder !== void 0 && placeholder[0] ? renderTextLikeJSX(placeholder[0], valueTextStyles) : null, swapRightJSX, placeholder !== null && placeholder !== void 0 && placeholder[1] ? renderTextLikeJSX(placeholder[1], valueTextStyles) : null),
    isLink: value && clearable ? false : isLink,
    valueExtra: value && clearable ? /*#__PURE__*/React.createElement(React.Fragment, null, restProps.valueExtra, /*#__PURE__*/React.createElement(TextInputClear, {
      onPress: () => {
        onChange(undefined);
      }
    })) : restProps.valueExtra
  }));
};

export default /*#__PURE__*/memo(FieldDateRange);
//# sourceMappingURL=field-date-range.js.map