SWAMPy

✎ CARVE FLESH

EDITING: GroupEditForm.js

/*
 * Copyright (C) 2021 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

import {Button} from '@instructure/ui-buttons'
import {View} from '@instructure/ui-view'
import {useScope as useI18nScope} from '@canvas/i18n'
import PropTypes from 'prop-types'
import React from 'react'
import {Form} from 'react-final-form'
import Modal from '@canvas/instui-bindings/react/InstuiModal'
import {ApplyTheme} from '@instructure/ui-themeable'
import {Flex} from '@instructure/ui-flex'
import {Mask} from '@instructure/ui-overlays'
import {
  composeValidators,
  maxLengthValidator,
  requiredValidator,
} from '@canvas/outcomes/react/validators/finalFormValidators'
import LabeledTextField from '../shared/LabeledTextField'
import LabeledRceField from '../shared/LabeledRceField'

const I18n = useI18nScope('FindOutcomesModal')

const titleValidator = composeValidators(requiredValidator, maxLengthValidator(255))

const GroupEditForm = ({initialValues, onSubmit, isOpen, onCloseHandler}) => {
  return (
    <Form
      onSubmit={onSubmit}
      initialValues={initialValues}
      render={({handleSubmit, form}) => {
        const {valid, dirty} = form.getState()

return (
          <ApplyTheme theme={{[Mask.theme]: {zIndex: '1000'}}}>
            <Modal
              label={I18n.t('Edit Group')}
              open={isOpen}
              onDismiss={onCloseHandler}
              size="medium"
              shouldReturnFocus={true}
              shouldCloseOnDocumentClick={false}
              data-testid="outcome-management-edit-modal"
            >
              <Modal.Body>
                <Flex as="div" alignItems="start" padding="small 0" height="7rem">
                  <Flex.Item size="50%" padding="0 xx-small 0 0">
                    <LabeledTextField
                      name="title"
                      label={I18n.t('Group Name')}
                      type="text"
                      size="medium"
                      validate={titleValidator}
                    />
                  </Flex.Item>
                </Flex>
                <View as="div" padding="medium 0">
                  <LabeledRceField name="description" label={I18n.t('Group Description')} />
                </View>
              </Modal.Body>
              <Modal.Footer>
                <Button
                  type="button"
                  color="secondary"
                  margin="0 x-small 0 0"
                  onClick={onCloseHandler}
                >
                  {I18n.t('Cancel')}
                </Button>
                &nbsp;
                <Button
                  onClick={handleSubmit}
                  type="button"
                  color="primary"
                  margin="0 x-small 0 0"
                  interaction={valid && dirty ? 'enabled' : 'disabled'}
                >
                  {I18n.t('Save')}
                </Button>
              </Modal.Footer>
            </Modal>
          </ApplyTheme>
        )
      }}
    />
  )
}

GroupEditForm.propTypes = {
  initialValues: PropTypes.shape({
    title: PropTypes.string,
    description: PropTypes.string,
  }),
  onSubmit: PropTypes.func.isRequired,
  isOpen: PropTypes.bool.isRequired,
  onCloseHandler: PropTypes.func.isRequired,
}

export default GroupEditForm

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📁 __tests__/	DIR	—	2023-09-24 03:39
📄 GroupDescriptionModal.js	JS	2 KB	2023-09-24 03:39	EDIT
📄 GroupDescriptionModal.stories.js	JS	1.1 KB	2023-09-24 03:39	EDIT
📄 GroupEditForm.js	JS	3.8 KB	2023-09-24 03:39	EDIT
📄 GroupEditModal.js	JS	2.6 KB	2023-09-24 03:39	EDIT
📄 GroupEditModal.stories.js	JS	1.4 KB	2023-09-24 03:39	EDIT
📄 GroupMoveModal.js	JS	4.1 KB	2023-09-24 03:39	EDIT
📄 GroupMoveModal.stories.js	JS	1.8 KB	2023-09-24 03:39	EDIT
📄 GroupRemoveModal.js	JS	3.6 KB	2023-09-24 03:39	EDIT
📄 GroupRemoveModal.stories.js	JS	1.5 KB	2023-09-24 03:39	EDIT
📄 index.js	JS	21 KB	2023-09-24 03:39	EDIT
📄 ManageOutcomeItem.js	JS	6.9 KB	2023-09-24 03:39	EDIT
📄 ManageOutcomeItem.stories.js	JS	2 KB	2023-09-24 03:39	EDIT
📄 ManageOutcomesBillboard.js	JS	1.8 KB	2023-09-24 03:39	EDIT
📄 ManageOutcomesBillboard.stories.js	JS	1007 B	2023-09-24 03:39	EDIT
📄 ManageOutcomesFooter.js	JS	4.6 KB	2023-09-24 03:39	EDIT
📄 ManageOutcomesFooter.stories.js	JS	1.1 KB	2023-09-24 03:39	EDIT
📄 ManageOutcomesView.js	JS	8.2 KB	2023-09-24 03:39	EDIT
📄 ManageOutcomesView.stories.js	JS	2.2 KB	2023-09-24 03:39	EDIT
📄 OutcomeDescription.js	JS	4.9 KB	2023-09-24 03:39	EDIT
📄 OutcomeDescription.stories.js	JS	1.2 KB	2023-09-24 03:39	EDIT
📄 OutcomeEditModal.js	JS	13 KB	2023-09-24 03:39	EDIT
📄 OutcomeEditModal.stories.js	JS	3.1 KB	2023-09-24 03:39	EDIT
📄 OutcomeGroupHeader.js	JS	3.8 KB	2023-09-24 03:39	EDIT
📄 OutcomeGroupHeader.stories.js	JS	1.4 KB	2023-09-24 03:39	EDIT
📄 OutcomeKebabMenu.js	JS	3.4 KB	2023-09-24 03:39	EDIT
📄 OutcomeKebabMenu.stories.js	JS	1.6 KB	2023-09-24 03:39	EDIT
📄 OutcomeManagementPanel.stories.js	JS	2.1 KB	2023-09-24 03:39	EDIT
📄 OutcomeMoveModal.js	JS	5.5 KB	2023-09-24 03:39	EDIT
📄 OutcomeMoveModal.stories.js	JS	2.1 KB	2023-09-24 03:39	EDIT
📄 OutcomeRemoveModal.js	JS	9 KB	2023-09-24 03:39	EDIT
📄 OutcomeRemoveModal.stories.js	JS	2.7 KB	2023-09-24 03:39	EDIT
📄 OutcomeSearchBar.js	JS	2.7 KB	2023-09-24 03:39	EDIT
📄 OutcomeSearchBar.stories.js	JS	1.1 KB	2023-09-24 03:39	EDIT
📄 OutcomesPopover.js	JS	4.1 KB	2023-09-24 03:39	EDIT
📄 OutcomesPopover.stories.js	JS	1.7 KB	2023-09-24 03:39	EDIT
📄 Ratings.js	JS	12.2 KB	2023-09-24 03:39	EDIT
📄 Ratings.stories.js	JS	2.3 KB	2023-09-24 03:39	EDIT
📄 shapes.js	JS	2.5 KB	2023-09-24 03:36	EDIT
📄 TreeBrowser.js	JS	5.7 KB	2023-09-24 03:39	EDIT