SWAMPy

✎ CARVE FLESH

EDITING: FixedContentTray.js

/*
 * Copyright (C) 2022 - 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 React from 'react'
import PropTypes from 'prop-types'
import {Flex} from '@instructure/ui-flex'
import {Tray} from '@instructure/ui-tray'
import {View} from '@instructure/ui-view'
import {getTrayHeight} from './trayUtils'

// Need these styles for drawing over <ColorInput /> popup.
const topElementStyles = {zIndex: 10000}

function renderJoinedItem(bodyAs, renderBody, renderFooter) {
  return (
    <Flex.Item height="0" shouldGrow={true}>
      <Flex as={bodyAs} direction="column" margin="0" height="100%">
        <Flex.Item as="div" overflowX="auto" height="0" shouldGrow={true}>
          {renderBody()}
        </Flex.Item>
        <footer style={topElementStyles}>
          <View as="div" borderWidth="small none none none">
            {renderFooter()}
          </View>
        </footer>
      </Flex>
    </Flex.Item>
  )
}

export const FixedContentTray = ({
  title,
  isOpen,
  onDismiss,
  onUnmount,
  mountNode,
  renderHeader,
  renderBody,
  renderFooter,
  bodyAs,
  shouldJoinBodyAndFooter,
}) => {
  return (
    <Tray
      data-mce-component={true}
      label={title}
      mountNode={mountNode}
      onDismiss={onDismiss}
      onExited={onUnmount}
      open={isOpen}
      placement="end"
      shouldCloseOnDocumentClick={true}
      shouldContainFocus={true}
      shouldReturnFocus={true}
      size="regular"
    >
      <Flex direction="column" height={getTrayHeight()}>
        <header style={topElementStyles}>
          <View as="div" borderWidth="none none small none">
            {renderHeader()}
          </View>
        </header>
        {shouldJoinBodyAndFooter ? (
          renderJoinedItem(bodyAs, renderBody, renderFooter)
        ) : (
          <>
            <Flex.Item as={bodyAs} overflowX="auto" height="0" shouldGrow={true}>
              {renderBody()}
            </Flex.Item>
            <footer style={topElementStyles}>
              <View as="div" borderWidth="none none small none">
                {renderFooter()}
              </View>
            </footer>
          </>
        )}
      </Flex>
    </Tray>
  )
}

FixedContentTray.propTypes = {
  renderHeader: PropTypes.func.isRequired,
  renderBody: PropTypes.func.isRequired,
  renderFooter: PropTypes.func.isRequired,
  title: PropTypes.string,
  isOpen: PropTypes.bool,
  onDismiss: PropTypes.func,
  onUnmount: PropTypes.func,
  mountNode: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  bodyAs: PropTypes.string,
  shouldJoinBodyAndFooter: PropTypes.bool,
}

FixedContentTray.defaultProps = {
  title: null,
  isOpen: false,
  onDismiss: () => {},
  onUnmount: () => {},
  bodyAs: 'div',
  shouldJoinBodyAndFooter: false,
}

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📁 __mocks__/	DIR	—	2023-09-24 03:36
📁 __tests__/	DIR	—	2023-09-24 03:39
📁 DimensionsInput/	DIR	—	2023-09-24 03:39
📁 ImageCropper/	DIR	—	2023-09-24 03:39
📁 Upload/	DIR	—	2023-09-24 03:39
📄 buildDownloadUrl.js	JS	1.1 KB	2023-09-24 03:36	EDIT
📄 CanvasContentTray.js	JS	18.4 KB	2023-09-24 03:39	EDIT
📄 CheckerboardStyling.js	JS	1 KB	2023-09-24 03:36	EDIT
📄 ColorInput.js	JS	6 KB	2023-09-24 03:39	EDIT
📄 compressionUtils.js	JS	2.6 KB	2023-09-24 03:39	EDIT
📄 ConditionalTooltip.js	JS	1.1 KB	2023-09-24 03:39	EDIT
📄 ContentSelection.js	JS	7.8 KB	2023-09-24 03:39	EDIT
📄 dateUtils.js	JS	1.1 KB	2023-09-24 03:36	EDIT
📄 DimensionUtils.js	JS	1.9 KB	2023-09-24 03:36	EDIT
📄 ErrorBoundary.js	JS	1.5 KB	2023-09-24 03:39	EDIT
📄 EventUtils.ts	TS	2 KB	2023-09-24 03:36	EDIT
📄 fileShape.js	JS	1.7 KB	2023-09-24 03:36	EDIT
📄 fileTypeUtils.js	JS	4 KB	2023-09-24 03:36	EDIT
📄 fileUtils.js	JS	945 B	2023-09-24 03:36	EDIT
📄 Filter.js	JS	11.9 KB	2023-09-24 03:39	EDIT
📄 FixedContentTray.js	JS	3.3 KB	2023-09-24 03:39	EDIT
📄 ImageOptionsForm.js	JS	5.4 KB	2023-09-24 03:39	EDIT
📄 LinkDisplay.js	JS	2.6 KB	2023-09-24 03:39	EDIT
📄 linkUtils.js	JS	1.6 KB	2023-09-24 03:39	EDIT
📄 Previewable.js	JS	1.9 KB	2023-09-24 03:36	EDIT
📄 PreviewIcon.js	JS	2.9 KB	2023-09-24 03:39	EDIT
📄 RceFileBrowser.js	JS	3.2 KB	2023-09-24 03:39	EDIT
📄 round.js	JS	1.1 KB	2023-09-24 03:36	EDIT
📄 StoreContext.js	JS	1.9 KB	2023-09-24 03:39	EDIT
📄 StudioLtiSupportUtils.ts	TS	3.7 KB	2023-09-24 03:36	EDIT
📄 trayUtils.js	JS	1.3 KB	2023-09-24 03:36	EDIT
📄 UnknownFileTypePanel.js	JS	1.1 KB	2023-09-24 03:39	EDIT
📄 useDataUrl.js	JS	2.2 KB	2023-09-24 03:36	EDIT