| import React from 'react'; | |
| import PropTypes from 'prop-types'; | |
| import styles from './styles.css'; | |
| function getStyles(fontSize, lineHeight, linesToShow) { | |
| return { | |
| fontSize, | |
| lineHeight, | |
| height: fontSize * lineHeight * linesToShow, | |
| WebkitLineClamp: linesToShow, |
| const port = process.env.PORT || 3001 // your local port | |
| app.listen(port, () => { | |
| console.log(`Server running on port ${port}/`) | |
| }) |
| // Wrap routes <Switch> | |
| import { Component } from 'react' | |
| import { withRouter } from 'react-router-dom' | |
| import PropTypes from 'prop-types' | |
| class ScrollToTop extends Component { | |
| static propTypes = { | |
| location: PropTypes.object.isRequired, | |
| children: PropTypes.element.isRequired, | |
| } |
| import React, { Component } from 'react' | |
| import PropTypes from 'prop-types' | |
| import Color from 'color' | |
| import styled, { keyframes } from 'styled-components' | |
| const getCircleSize = () => { | |
| let circleSize = window.outerWidth * 2.5 | |
| if (window.outerHeight > window.outerWidth) { | |
| circleSize = window.outerHeight * 2.5 | |
| } |
| import React from 'react' | |
| import PropTypes from 'prop-types' | |
| import styled from 'styled-components' | |
| const Scroll = styled.div` | |
| overflow-y: scroll; | |
| -webkit-overflow-scrolling: touch; | |
| height: ${props => props.reduceHeight ? `calc(100% - ${props.reduceHeight})` : '100%'}; | |
| width: 100%; | |
| &::-webkit-scrollbar { |
| import React from 'react' | |
| import Collapse, { Panel } from 'rc-collapse' | |
| import PropTypes from 'prop-types' | |
| import styled from 'styled-components' | |
| import 'rc-collapse/assets/index.css' | |
| const StyledCollapse = styled(Collapse)` | |
| &.rc-collapse { | |
| width: 100%; | |
| border-radius: 0px; |
| function removeItem(array, action) { | |
| const actionIndex = array.indexOf(action) | |
| const newArray = array.slice() | |
| newArray.splice(actionIndex, 1) | |
| return newArray | |
| } |
| import PropTypes from 'prop-types' | |
| /** | |
| * Takes a render prop which will render if we are in development environment | |
| * @method IfDevelopment | |
| * @param {Func} render callback function to render JSX | |
| */ | |
| const IfDevelopment = ({ render }) => ( | |
| process.env.NODE_ENV === 'development' ? render() : null | |
| ) |
| /** | |
| * Checks if the value is a number 0-9 or . | |
| * @method isNumberOnly | |
| * @param {String} value String to test | |
| * @return {Boolean} Result of regex test | |
| */ | |
| export function isNumberOnly(value) { | |
| const regexp = /\d|\./g | |
| return regexp.test(value) | |
| } |
This guide will help you get a starting point for implementing Polymer into a default install of Laravel v5.3.
cd application/resources
bower init
bower install --save polymerInclude the components in the <head> of application/resources/views/layout.blade.php: