@festo-ui/react 4.0.3-pre-20221213.1 → 5.0.0-dev.46

package/node/lib/forms/date-range-picker/DateRangePicker.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _flatpickr = _interopRequireDefault(require("flatpickr"));
+var _rangePlugin = _interopRequireDefault(require("flatpickr/dist/plugins/rangePlugin"));
+var _react = require("react");
+var _useId = _interopRequireDefault(require("../../helper/useId"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function DateRangePicker(_ref) {
+  let {
+    children,
+    className,
+    disabled,
+    error,
+    formatDate,
+    hint,
+    onChange,
+    options,
+    required,
+    defaultValue = new Date()
+  } = _ref;
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [calendar, setCalendar] = (0, _react.useState)(null);
+  const id = (0, _useId.default)();
+  function toggle() {
+    const newOpen = !open;
+    setOpen(newOpen);
+    if (newOpen) {
+      calendar?.open();
+    } else {
+      calendar?.close();
+    }
+  }
+  const inputRef = (0, _react.useRef)(null);
+  const input2Ref = (0, _react.useRef)(null);
+  const containerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    function handleChange(dates) {
+      if (onChange) {
+        onChange(dates);
+      }
+    }
+    function handleClose() {
+      setOpen(false);
+      inputRef.current?.blur();
+      input2Ref.current?.blur();
+    }
+    if (containerRef.current && inputRef.current && input2Ref.current && calendar === null) {
+      setCalendar((0, _flatpickr.default)(inputRef.current, {
+        defaultDate: defaultValue,
+        plugins: [(0, _rangePlugin.default)({
+          input: input2Ref.current
+        })],
+        onChange: v => handleChange(v),
+        position: 'below center',
+        positionElement: containerRef.current,
+        formatDate,
+        closeOnSelect: !options?.keepOpenOnDateChange ?? true,
+        clickOpens: false,
+        onClose: handleClose,
+        minDate: options?.minDate,
+        maxDate: options?.maxDate
+      }));
+    }
+  }, [inputRef, input2Ref, containerRef, formatDate, options, onChange, calendar, defaultValue]);
+  (0, _react.useEffect)(() => () => {
+    if (calendar !== null) {
+      calendar.destroy();
+    }
+  }, [calendar]);
+  const handleKeyDown = event => {
+    if (event.key === 'Enter') {
+      toggle();
+    }
+  };
+  const handleKeyUp = event => {
+    if (event.key === ' ') {
+      toggle();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    tabIndex: 0,
+    role: "button",
+    className: (0, _classnames.default)('fr-date-range-picker', className),
+    onClick: toggle,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+      className: "fwe-input-text fwe-input-text-icon",
+      htmlFor: id,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: (0, _classnames.default)('fwe-icon fwe-icon-time-calendar', {
+          'fwe-color-hero': open && !disabled,
+          'fwe-color-control-disabled': disabled
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: containerRef,
+        className: "fr-date-range-picker-inputs",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          ref: inputRef,
+          "aria-label": "picked start date",
+          type: "text",
+          readOnly: true,
+          required: required,
+          className: (0, _classnames.default)({
+            'fwe-border-hero': open && !disabled
+          }),
+          disabled: disabled,
+          id: id
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          ref: input2Ref,
+          "aria-label": "picked end date",
+          type: "text",
+          readOnly: true,
+          required: required,
+          className: (0, _classnames.default)({
+            'fwe-border-hero': open && !disabled
+          }),
+          disabled: disabled
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _classnames.default)('fwe-input-text-label', {
+          'fwe-color-text-disabled': disabled
+        }),
+        children: children
+      }), hint && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fwe-input-text-info",
+        children: hint
+      }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "fwe-input-text-invalid",
+        children: error
+      })]
+    })
+  });
+}
+var _default = DateRangePicker;
+exports.default = _default;

package/node/lib/forms/radio/RadioButton.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _RadioGroupContext = _interopRequireDefault(require("./RadioGroupContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function RadioButton(_ref) {
+  let {
+    id,
+    onChange,
+    value,
+    name,
+    checked,
+    labelPosition = 'after',
+    large = false,
+    disabled = false,
+    required = false,
+    children,
+    className
+  } = _ref;
+  const {
+    disabled: groupDisabled,
+    labelPosition: groupLabelPosition,
+    large: groupLarge,
+    name: groupName,
+    required: groupRequired,
+    value: groupValue
+  } = (0, _react.useContext)(_RadioGroupContext.default);
+  const innerLabelPosition = groupLabelPosition || labelPosition;
+  const classes = (0, _classnames.default)('fwe-radio', {
+    'fwe-radio-label-below': innerLabelPosition === 'below'
+  }, {
+    'fwe-radio-label-before': innerLabelPosition === 'before'
+  }, {
+    'fwe-radio-lg': large || groupLarge
+  }, className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+    className: classes,
+    htmlFor: id,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      checked: checked,
+      type: "radio",
+      id: id,
+      name: groupName || name,
+      value: value || groupValue,
+      onChange: () => onChange(value),
+      disabled: disabled || groupDisabled,
+      required: required || groupRequired
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-radio-checkmark"
+    }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-radio-label-content",
+      children: children
+    })]
+  });
+}
+var _default = RadioButton;
+exports.default = _default;

package/node/lib/forms/radio/RadioGroup.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _RadioGroupContext = _interopRequireDefault(require("./RadioGroupContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function RadioGroup(_ref) {
+  let {
+    value,
+    name,
+    checked,
+    labelPosition = 'after',
+    large,
+    disabled,
+    required,
+    children,
+    className
+  } = _ref;
+  const contextValue = (0, _react.useMemo)(() => ({
+    value,
+    name,
+    checked,
+    labelPosition,
+    large,
+    disabled,
+    required
+  }), []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroupContext.default.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)('fwe-radio-group', className),
+      role: "radiogroup",
+      children: children
+    })
+  });
+}
+var _default = RadioGroup;
+exports.default = _default;

package/node/lib/forms/radio/RadioGroupContext.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const RadioGroupContext = /*#__PURE__*/(0, _react.createContext)({});
+var _default = RadioGroupContext;
+exports.default = _default;

package/node/lib/forms/segment/Segment.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _useControlled = _interopRequireDefault(require("../../helper/useControlled"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const defaultConfig = {
+  outline: true,
+  iconOnly: true
+};
+function Segment(props) {
+  const {
+    children,
+    legend,
+    config,
+    onChange,
+    className,
+    value: valueProps
+  } = props;
+  const innerConfig = {
+    ...defaultConfig,
+    ...config
+  };
+  let useIcon = false;
+  let useIconAndText = false;
+  let tmpValue = '';
+  _react.default.Children.forEach(children, (child, index) => {
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return null;
+    }
+    if (index === 0 && child.props.icon !== null) {
+      if (innerConfig.iconOnly) {
+        useIcon = true;
+      } else {
+        useIconAndText = true;
+      }
+    }
+    if (child.props.checked) {
+      tmpValue = child.props.value;
+    }
+    return null;
+  });
+  const [value, setValue] = (0, _useControlled.default)({
+    controlled: valueProps,
+    default: tmpValue
+  });
+  const handleChange = (event, _value) => {
+    if (onChange) {
+      onChange(event, _value);
+    }
+    setValue(_value);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
+    className: (0, _classnames.default)('fwe-segment', {
+      'fwe-segment-outline': innerConfig.outline,
+      'fwe-segment-icon': useIcon,
+      'fwe-segment-icon-text': useIconAndText
+    }, className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
+      className: "fwe-sr-only fwe-d-inline-block",
+      children: legend
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fwe-segment-group",
+      children: _react.default.Children.map(children, child => {
+        if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+          return null;
+        }
+        return /*#__PURE__*/_react.default.cloneElement(child, {
+          ...child.props,
+          onChange: handleChange,
+          iconOnly: innerConfig.iconOnly,
+          checked: child.props.value === value
+        });
+      })
+    })]
+  });
+}
+var _default = Segment;
+exports.default = _default;

package/node/lib/forms/segment/segment-control/SegmentControl.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function SegmentControl(props) {
+  const {
+    label,
+    checked,
+    disabled,
+    name,
+    value,
+    icon,
+    onChange,
+    iconOnly,
+    id,
+    className
+  } = props;
+  const componentId = (0, _react.useRef)(id ?? (Math.random() * Date.now()).toString().replace('.', '-'));
+  let viewMode = 'text';
+  if (icon) {
+    viewMode = iconOnly ? 'icon' : 'icon-text';
+  }
+  const prefix = 'fwe-icon-';
+  let innerIcon = icon;
+  if (icon && icon.indexOf(prefix) === -1) {
+    innerIcon = prefix + icon;
+  }
+  const handleChange = event => {
+    if (onChange) {
+      onChange(event, value);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      className: "fwe-segment-input",
+      type: "radio",
+      id: componentId.current,
+      name: name,
+      value: value,
+      checked: checked,
+      disabled: disabled,
+      onChange: e => handleChange(e)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+      className: (0, _classnames.default)('fwe-segment-label', className),
+      htmlFor: componentId.current,
+      children: [viewMode === 'icon' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fwe-sr-only",
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          "aria-hidden": "true",
+          className: (0, _classnames.default)('fwe-icon', innerIcon)
+        })]
+      }), viewMode === 'text' && label, viewMode === 'icon-text' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          "aria-hidden": "true",
+          className: (0, _classnames.default)('fwe-icon', innerIcon)
+        }), label]
+      })]
+    })]
+  });
+}
+var _default = SegmentControl;
+exports.default = _default;