@hisptz/react-ui/build/cjs/components/FormField/FFFormField.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 = void 0;

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

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

var _field = _interopRequireDefault(require("./models/field"));

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

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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }

const Template = (args, context) => /*#__PURE__*/_react.default.createElement(_index.Input, _extends({}, args, {
  input: { ...args.input,
    value: context.value,
    onChange: context.onChange
  }
}));

const NativeInputs = Template.bind({});
exports.NativeInputs = NativeInputs;
NativeInputs.args = {
  valueType: _constants.VALUE_TYPES.TEXT.name,
  input: {
    value: "Text field",
    onChange: console.log,
    name: "text",
    label: "Text Field"
  }
};
const LegendDefinitionInput = Template.bind({});
exports.LegendDefinitionInput = LegendDefinitionInput;
LegendDefinitionInput.args = {
  valueType: _constants.VALUE_TYPES.LEGEND_DEFINITION.name,
  input: {
    value: {
      name: "Target Reached",
      color: "#147e14"
    },
    onChange: console.log,
    name: "legend-definition",
    label: "Legend"
  }
};
const LegendMinMax = Template.bind({});
exports.LegendMinMax = LegendMinMax;
LegendMinMax.args = {
  valueType: _constants.VALUE_TYPES.LEGEND_MIN_MAX.name,
  input: {
    value: {
      id: "legend-id",
      legendDefinitionId: "legend-definition-id",
      startValue: 1,
      endValue: 100
    },
    onChange: console.log,
    name: "legend-definition",
    label: "Legend"
  },
  legendDefinition: {
    name: "Target Reached",
    id: "legend-defn-id",
    color: "#147e14"
  }
};
const MultipleFields = Template.bind({});
exports.MultipleFields = MultipleFields;
MultipleFields.args = {
  valueType: _constants.VALUE_TYPES.MULTIPLE_FIELDS.name,
  input: {
    value: [{
      name: "Target Reached",
      color: "#147e14"
    }, {
      name: "Better Performance",
      color: "#eeea21"
    }, {
      name: "Worst Performance",
      color: "#ee2139"
    }],
    onChange: console.log,
    name: "multiple-fields",
    label: "Multiple Fields"
  },
  multipleField: {
    valueType: _constants.VALUE_TYPES.LEGEND_DEFINITION.name,
    input: {
      value: "",
      onChange: console.log,
      name: "legend-definition"
    }
  },
  deletable: false,
  addable: false,
  initialFieldCount: 4
};
const MultipleFieldsWithSpecifiedListOfFields = Template.bind({});
exports.MultipleFieldsWithSpecifiedListOfFields = MultipleFieldsWithSpecifiedListOfFields;
MultipleFieldsWithSpecifiedListOfFields.args = {
  valueType: _constants.VALUE_TYPES.MULTIPLE_FIELDS.name,
  input: {
    value: [{
      id: "id",
      legendDefinitionId: "legend-definition-id",
      startValue: 1,
      endValue: 100
    }, {
      name: "Better Performance",
      color: "#eeea21"
    }, "Text"],
    onChange: console.log,
    name: "multiple-fields",
    label: "Multiple Fields"
  },
  multipleFields: [new _field.default({
    valueType: _constants.VALUE_TYPES.LEGEND_MIN_MAX.name,
    name: "legend-definition",
    label: "Legend",
    legendDefinition: {
      name: "Target Reached",
      id: "legend-definition-id",
      color: "#147e14"
    }
  }), new _field.default({
    valueType: _constants.VALUE_TYPES.LEGEND_DEFINITION.name,
    name: "legend-definition",
    label: "Legend"
  }), new _field.default({
    valueType: _constants.VALUE_TYPES.TEXT.name,
    name: "text",
    label: "Text Field"
  })]
};
var _default = {
  title: "Components/Custom Inputs/FFInput",
  component: _index.Input,
  decorators: [InputStory => {
    const [value, setValue] = (0, _react.useState)();
    return /*#__PURE__*/_react.default.createElement("div", {
      style: {
        display: "flex",
        justifyContent: "center",
        width: "100%"
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      style: {
        width: 600,
        height: "100%",
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center"
      }
    }, /*#__PURE__*/_react.default.createElement(InputStory, {
      value: value,
      onChange: setValue
    })));
  }],
  parameters: {
    actions: {
      handles: ["onChange"]
    }
  },
  argTypes: {
    onChange: {
      action: "onChange"
    }
  }
};
exports.default = _default;