@geneui/components 3.0.0-next-06dadf3-29102024 → 3.0.0-next-63cb5e7-01112024

package/Checkbox/index.js

@@ -1,229 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { forwardRef, useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { c as classnames } from '../index-031ff73c.js';
-import { c as checkboxRadioSwitcherConfig } from '../configs-00612ce0.js';
-import { n as noop, i as interceptValue, s as stopEvent } from '../index-5f37f281.js';
-import { T as Tooltip } from '../index-c7646e48.js';
-import '../checkboxRadioSwitcher-5b69d7bd.js';
-import { g as guid } from '../guid-8ddf77b3.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../tslib.es6-f211516f.js';
-import '../GeneUIProvider/index.js';
-import '../style-inject.es-746bb8ed.js';
-
-const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    size,
-    label,
-    labelPosition,
-    labelTooltip,
-    labelAlignment,
-    description,
-    indeterminate,
-    readOnly,
-    disabled,
-    required,
-    isValid,
-    errorText,
-    defaultChecked,
-    onChange,
-    value,
-    className,
-    onKeyPress,
-    checked,
-    onWrapperClick,
-    onMouseEnter,
-    onMouseLeave,
-    ...restProps
-  } = props;
-  const [checkedState, setCheckedState] = useState(defaultChecked);
-  const isControlled = 'checked' in props && typeof checked !== 'undefined';
-  const localChecked = isControlled ? checked : checkedState;
-  const randomId = useMemo(guid, []);
-  const handleChange = e => {
-    const {
-      checked
-    } = e.target;
-    !isControlled && setCheckedState(checked);
-    onChange(interceptValue(e, value));
-  };
-  const handleKeyPress = e => {
-    if (e.which === 13 || e.keyCode === 13) {
-      // need this for prevent form default submit
-      stopEvent(e);
-      const {
-        checked
-      } = e.target;
-
-      // need this because in event time checkbox value is old.
-      const changedEvent = {
-        ...e
-      };
-      changedEvent.target.checked = !checked;
-      !isControlled && setCheckedState(checked => !checked);
-      onChange(interceptValue(changedEvent, value));
-    }
-    onKeyPress(e);
-  };
-  const hasError = !isValid;
-  return /*#__PURE__*/React__default.createElement("div", {
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    className: classnames('crs-holder', className, "lp-".concat(labelPosition), "la-".concat(labelAlignment), {
-      disabled,
-      error: hasError,
-      'read-only': readOnly
-    }),
-    onClick: onWrapperClick
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('label-holder', {
-      'has-label': !!label
-    })
-  }, label && /*#__PURE__*/React__default.createElement(Tooltip, {
-    position: "auto",
-    title: label,
-    isVisible: labelTooltip
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "crs-item crs-label"
-  }, /*#__PURE__*/React__default.createElement("label", {
-    className: "ellipsis-text",
-    title: labelTooltip,
-    htmlFor: randomId
-  }, required && "* ", label))), /*#__PURE__*/React__default.createElement("div", {
-    className: "crs-item crs-component"
-  }, /*#__PURE__*/React__default.createElement("input", _extends({
-    type: "checkbox",
-    onKeyPress: handleKeyPress,
-    onChange: handleChange,
-    checked: localChecked,
-    disabled: disabled,
-    value: value,
-    ref: ref,
-    id: randomId
-  }, restProps)), /*#__PURE__*/React__default.createElement("label", {
-    className: classnames('checkbox', 'cr-element', "s-".concat(size), {
-      indeterminate,
-      active: !indeterminate && localChecked,
-      'error-color': !indeterminate && !localChecked && !errorText && hasError
-    }),
-    htmlFor: randomId
-  }))), hasError && errorText && /*#__PURE__*/React__default.createElement("div", {
-    className: "information-message color-danger"
-  }, errorText), description && /*#__PURE__*/React__default.createElement("div", {
-    className: "input-description"
-  }, description));
-});
-Checkbox.propTypes = {
-  /**
-   * At what point an element becomes focusable when a user is interacting with the page via a keyboard
-   */
-  tabIndex: PropTypes.number,
-  /**
-   * Use this prop to control Checkbox state. Note that when you specify this prop, the Checkbox will not functionate itself
-   */
-  checked: PropTypes.bool,
-  /**
-   * Checkbox size
-   */
-  size: PropTypes.oneOf(checkboxRadioSwitcherConfig.size),
-  /**
-   * Use this prop to add an additional label to Checkbox
-   */
-  label: PropTypes.node,
-  /**
-   * Tooltip for label
-   */
-  labelTooltip: PropTypes.string,
-  /**
-   * Specify "label" position
-   */
-  labelPosition: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelPosition),
-  /**
-   * Specify "label" alignment
-   */
-  labelAlignment: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelAlignment),
-  /**
-   * Use this prop to add an additional description field to the Checkbox
-   */
-  description: PropTypes.node,
-  /**
-   * Use this prop to make checkbox neither checked nor unchecked
-   */
-  indeterminate: PropTypes.bool,
-  /**
-   * Makes Checkbox readonly when set to "true"
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * Makes Checkbox disabled when set to "true"
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Checkbox adds an extra asterisk to the "label". For more info see "ValidatableCheckbox"(integrated Checkbox with "Form" organism).
-   */
-  required: PropTypes.bool,
-  /**
-   * Control Checkbox validation. For more info see "ValidatableCheckbox"(integrated Checkbox with "Form" organism).
-   */
-  isValid: PropTypes.bool,
-  /**
-   * Use this prop to specify error message. This will be displayed when "isValid" is set to "false"
-   */
-  errorText: PropTypes.node,
-  /**
-   * This prop will only applied once as defaultState for "checked" when Checkbox mounts.
-   * Note that specifying this prop does not mean to control it.
-   */
-  defaultChecked: PropTypes.bool,
-  /**
-   * Fires an event when Checkbox is clicked or "enter" key is pressed((event: Event) => void).
-   */
-  onChange: PropTypes.func,
-  /**
-   * Fires an event when any key is pressed((event: Event) => void).
-   */
-  onKeyPress: PropTypes.func,
-  /**
-   * Fires an event when mouse enter((event: Event) => void).
-   */
-  onMouseEnter: PropTypes.func,
-  /**
-   * Fires an event when mouse leave((event: Event) => void).
-   */
-  onMouseLeave: PropTypes.func,
-  /**
-   * Fires an event when clicking on parent/wrapper of input ((event: Event) => void).
-   */
-  onWrapperClick: PropTypes.func,
-  /**
-   * Use this prop to get specified value when "onChange" is fired
-   */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
-  /**
-   * Additional className
-   */
-  className: PropTypes.string
-};
-Checkbox.defaultProps = {
-  tabIndex: 0,
-  size: checkboxRadioSwitcherConfig.size[0],
-  label: '',
-  labelPosition: checkboxRadioSwitcherConfig.labelPosition[0],
-  labelAlignment: checkboxRadioSwitcherConfig.labelAlignment[0],
-  description: '',
-  indeterminate: false,
-  readOnly: false,
-  disabled: false,
-  required: false,
-  isValid: true,
-  errorText: '',
-  defaultChecked: false,
-  onKeyPress: noop,
-  onChange: noop,
-  onWrapperClick: noop
-};
-
-export { Checkbox as default };

package/CheckboxGroup/index.js

@@ -1,203 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { useState, useEffect, useCallback } from 'react';
-import { c as classnames } from '../index-031ff73c.js';
-import PropTypes from 'prop-types';
-import { c as checkboxRadioSwitcherConfig } from '../configs-00612ce0.js';
-import { n as noop } from '../index-5f37f281.js';
-import Checkbox from '../Checkbox/index.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../index-c7646e48.js';
-import '../tslib.es6-f211516f.js';
-import '../GeneUIProvider/index.js';
-import '../style-inject.es-746bb8ed.js';
-import '../checkboxRadioSwitcher-5b69d7bd.js';
-import '../guid-8ddf77b3.js';
-
-function CheckboxGroup(props) {
-  const {
-    defaultSelected,
-    hoveredState,
-    labelAlignment,
-    showSelectAll,
-    labelPosition,
-    checkAllText,
-    description,
-    errorText,
-    className,
-    disabled,
-    onChange,
-    readOnly,
-    required,
-    isValid,
-    data,
-    size,
-    ...restProps
-  } = props;
-  const [valueState, setValueState] = useState(defaultSelected);
-  const isControlled = 'value' in props && props.value;
-  const values = isControlled ? props.value : valueState;
-  useEffect(() => {
-    setValueState(defaultSelected);
-  }, [defaultSelected]);
-  const handleChange = useCallback(e => {
-    const {
-      checked,
-      value
-    } = e.target;
-    const newValues = checked ? values.concat(value) : values.filter(item => item !== value);
-    !isControlled && setValueState(newValues);
-    onChange && onChange(newValues);
-  }, [isControlled, onChange, values]);
-  const handleChangeAll = useCallback(e => {
-    const {
-      checked
-    } = e.target;
-    const newValues = checked ? data.filter(option => !option.disabled).map(option => option.value) : [];
-    !isControlled && setValueState(newValues);
-    onChange && onChange(newValues);
-  }, [data, isControlled, onChange]);
-  const dataLength = data.filter(item => !item.disabled).length;
-  const valuesLength = values.length;
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames('cha-ra-group', className)
-  }, restProps), showSelectAll && data.length > 1 && /*#__PURE__*/React__default.createElement(Checkbox, {
-    value: "all",
-    disabled: dataLength ? disabled : true,
-    checked: valuesLength === dataLength,
-    indeterminate: valuesLength > 0 && valuesLength < dataLength,
-    onChange: handleChangeAll,
-    label: checkAllText,
-    size: size,
-    labelPosition: labelPosition,
-    labelAlignment: labelAlignment,
-    readOnly: readOnly
-  }), data.map((option, index) => {
-    const isTypeofString = typeof option === 'string';
-    const label = isTypeofString ? option : option.label;
-    const value = isTypeofString ? option : option.value;
-    return /*#__PURE__*/React__default.createElement(Checkbox, {
-      labelTooltip: option.labelTooltip || '',
-      className: classnames(option.className, {
-        active: hoveredState === index
-      }),
-      key: value,
-      disabled: disabled || option.disabled,
-      label: label,
-      value: value,
-      checked: values.includes(value),
-      onChange: handleChange,
-      description: description || option.description,
-      readOnly: readOnly || option.readOnly,
-      required: required || option.required,
-      isValid: !(isValid || option.isValid),
-      errorText: errorText || option.errorText,
-      size: size,
-      labelPosition: labelPosition,
-      labelAlignment: labelAlignment
-    });
-  }));
-}
-CheckboxGroup.propTypes = {
-  /** Initially selected value */
-  defaultSelected: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number])),
-  /**
-   * Disables events
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If data item is typeof string than value will apply both as checkbox label and value,
-   * Label: The text of the associated element.
-   * Value: The input value
-   * Disabled: A checkbox can appear disabled and be unable to change states
-   * readOnly: A checkbox can be read-only and unable to change states.
-   * required: If true, the input element will be required.
-   * labelTooltip: Tooltip for label.
-   * description: Checkbox description.
-   * isValid: Check validity of input value
-   * errorText: Displays custom error text when input value is not valid
-   */
-  data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
-    label: PropTypes.node,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
-    disabled: PropTypes.bool,
-    description: PropTypes.string,
-    labelTooltip: PropTypes.string,
-    readOnly: PropTypes.bool,
-    required: PropTypes.bool,
-    isValid: PropTypes.bool,
-    errorText: PropTypes.string
-  })])),
-  /**
-   * Custom text for checkAll checkbox
-   */
-  checkAllText: PropTypes.string,
-  /**
-   * Displays select all checkbox
-   */
-  showSelectAll: PropTypes.bool,
-  /**
-   * Array of values of the input elements
-   */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
-  /**
-   * Fires an event when Checkbox is clicked or "enter" key is pressed
-   * (event: SyntheticEvent) => void
-   */
-  onChange: PropTypes.func,
-  /**
-   * Additional className which applies to group holder div element
-   */
-  className: PropTypes.string,
-  /**
-   * Accepts same values as Checkbox component(check in Checkbox component(molecules) propTable)
-   */
-  size: PropTypes.oneOf(checkboxRadioSwitcherConfig.size),
-  /**
-   * Specify "label" position
-   */
-  labelPosition: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelPosition),
-  /**
-   * Specify "label" alignment
-   */
-  labelAlignment: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelAlignment),
-  /**
-   * Description for checkboxes
-   */
-  description: PropTypes.string,
-  /**
-   * Define is field read only or no.
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * Define is field required or no.
-   */
-  required: PropTypes.bool,
-  /**
-   * Additional state for field validation
-   */
-  isValid: PropTypes.bool,
-  /**
-   * Text that will be shown id field is invalid
-   */
-  errorText: PropTypes.string
-};
-CheckboxGroup.defaultProps = {
-  defaultSelected: [],
-  disabled: false,
-  showSelectAll: true,
-  data: [],
-  description: '',
-  checkAllText: 'Select All',
-  readOnly: false,
-  required: false,
-  isValid: true,
-  onChange: noop,
-  errorText: '',
-  size: checkboxRadioSwitcherConfig.size[0],
-  labelPosition: checkboxRadioSwitcherConfig.labelPosition[0],
-  labelAlignment: checkboxRadioSwitcherConfig.labelAlignment[0]
-};
-
-export { CheckboxGroup as default };