@hisptz/react-ui/build/cjs/components/FormField/RHFFormField.stories.js

A collection of reusable complex DHIS2 react ui components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.NativeInputs = exports.MultipleFieldsWithSpecifiedListOfFields = exports.MultipleFields = exports.LegendMinMax = exports.LegendDefinitionInput = exports.CustomSelect = void 0;

var _devtools = require("@hookform/devtools");

var _react = _interopRequireDefault(require("react"));

var _reactHookForm = require("react-hook-form");

var _HookFormInput = _interopRequireDefault(require("./components/HookFormInput"));

var _constants = require("./constants");

var _index = require("./index");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const Template = args => /*#__PURE__*/_react.default.createElement(_HookFormInput.default, args);

const NativeInputs = Template.bind({});
exports.NativeInputs = NativeInputs;
NativeInputs.args = {
  valueType: _constants.VALUE_TYPES.TEXT.name,
  label: "Text",
  name: "text",
  mandatory: true
};
const CustomSelect = Template.bind({});
exports.CustomSelect = CustomSelect;
CustomSelect.args = {
  valueType: _constants.VALUE_TYPES.TEXT.name,
  label: "Select",
  name: "text",
  mandatory: true,
  optionSet: {
    options: [{
      name: "Option 1",
      code: "option1"
    }, {
      name: "Option 2",
      code: "option2"
    }]
  }
};
const LegendDefinitionInput = Template.bind({});
exports.LegendDefinitionInput = LegendDefinitionInput;
LegendDefinitionInput.args = {
  valueType: _constants.VALUE_TYPES.LEGEND_DEFINITION.name,
  label: "Legend Definition",
  name: "legendDefinition",
  mandatory: true
};
const LegendMinMax = Template.bind({});
exports.LegendMinMax = LegendMinMax;
LegendMinMax.args = {
  valueType: _constants.VALUE_TYPES.LEGEND_MIN_MAX.name,
  label: "Legend Min Max",
  name: "legendMinMax",
  legendDefinition: {
    name: "Target Reached",
    id: "legend-defn-id",
    color: "#147e14"
  },
  mandatory: true
};
const MultipleFields = Template.bind({});
exports.MultipleFields = MultipleFields;
MultipleFields.args = {
  name: "multipleFields",
  valueType: _constants.VALUE_TYPES.MULTIPLE_FIELDS.name,
  multipleField: {
    valueType: _constants.VALUE_TYPES.LEGEND_DEFINITION.name,
    name: "legendDefinition"
  },
  deletable: false,
  addable: false,
  initialFieldCount: 7
};
const MultipleFieldsWithSpecifiedListOfFields = Template.bind({});
exports.MultipleFieldsWithSpecifiedListOfFields = MultipleFieldsWithSpecifiedListOfFields;
MultipleFieldsWithSpecifiedListOfFields.args = {
  valueType: _constants.VALUE_TYPES.MULTIPLE_FIELDS.name,
  name: "multipleFields",
  multipleFields: [{
    valueType: _constants.VALUE_TYPES.LEGEND_MIN_MAX.name,
    name: "legend-definition",
    label: "Legend",
    legendDefinition: {
      name: "Target Reached",
      id: "legend-definition-id",
      color: "#147e14"
    }
  }, {
    valueType: _constants.VALUE_TYPES.LEGEND_DEFINITION.name,
    name: "legend-definition",
    label: "Legend"
  }, {
    valueType: _constants.VALUE_TYPES.TEXT.name,
    name: "text",
    label: "Text Field"
  }]
};
var _default = {
  title: "Components/Custom Inputs/RHFInput",
  component: _index.Input,
  decorators: [InputStory => {
    const form = (0, _reactHookForm.useForm)({
      defaultValues: {
        text: ""
      }
    });
    return /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, form, /*#__PURE__*/_react.default.createElement("div", {
      style: {
        display: "flex",
        justifyContent: "center",
        width: "100%"
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      style: {
        width: "50%",
        height: "100%",
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center"
      }
    }, /*#__PURE__*/_react.default.createElement(InputStory, null))), /*#__PURE__*/_react.default.createElement(_devtools.DevTool, null));
  }],
  parameters: {
    actions: {
      handles: ["onChange"]
    }
  },
  argTypes: {
    onChange: {
      action: "onChange"
    },
    valueType: {
      control: {
        type: "select",
        options: Object.keys(_constants.VALUE_TYPES)
      }
    }
  }
};
exports.default = _default;